<template>
  <view class="gender-picker-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">选择性别</text>
    </view>
    
    <view class="picker-container">
      <radio-group @change="onGenderChange" class="gender-options">
        <view 
          class="gender-option" 
          v-for="(option, index) in genderOptions" 
          :key="index"
          :class="{ active: selectedGender === option.value }"
          @tap="selectGender(option.value)"
        >
          <view class="option-info">
            <text class="option-label">{{ option.label }}</text>
          </view>
          <radio :value="option.value.toString()" :checked="selectedGender === option.value" />
        </view>
      </radio-group>
      
      <view class="action-buttons">
        <button class="cancel-btn" @tap="goBack">取消</button>
        <button class="confirm-btn" @tap="confirmSelection">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 性别选项
const genderOptions = [
  { label: '男', value: 1 },
  { label: '女', value: 2 },
  { label: '保密', value: 0 }
];

// 当前选择的性别
const selectedGender = ref(1); // 默认男性

// 页面加载时获取当前性别
onMounted(() => {
  try {
    // 尝试从本地存储获取用户信息
    const savedUserInfo = uni.getStorageSync('userInfo');
    if (savedUserInfo) {
      const userInfo = JSON.parse(savedUserInfo);
      if (userInfo.gender !== undefined) {
        selectedGender.value = userInfo.gender;
      }
    }
  } catch (e) {
    console.error('获取用户信息失败:', e);
  }
});

// 处理性别变更事件
const onGenderChange = (e) => {
  selectedGender.value = parseInt(e.detail.value);
};

// 直接选择性别（通过点击行）
const selectGender = (value) => {
  selectedGender.value = value;
};

// 确认选择
const confirmSelection = () => {
  // 获取页面事件通道
  const eventChannel = getEventChannel();
  
  // 向来源页面传递选择的性别
  if (eventChannel) {
    eventChannel.emit('selectGender', {
      value: selectedGender.value,
      label: genderOptions.find(item => item.value === selectedGender.value)?.label
    });
  }
  
  // 返回上一页
  goBack();
};

// 获取事件通道
const getEventChannel = () => {
  try {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    return currentPage.getOpenerEventChannel();
  } catch (e) {
    console.error('获取事件通道失败:', e);
    return null;
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.gender-picker-page {
  min-height: 100vh;
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(44, 120, 115, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #2c7873;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
    }
  }
  
  .picker-container {
    padding: 20px;
    
    .gender-options {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .gender-option {
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        
        &:last-child {
          border-bottom: none;
        }
        
        &.active {
          background-color: rgba(44, 120, 115, 0.05);
        }
        
        .option-info {
          display: flex;
          align-items: center;
          
          .option-label {
            font-size: 16px;
            color: #333;
          }
        }
        
        radio {
          transform: scale(0.8);
        }
      }
    }
    
    .action-buttons {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      
      button {
        flex: 1;
        height: 44px;
        border-radius: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        
        &.cancel-btn {
          margin-right: 10px;
          background-color: #f5f5f5;
          border: 1px solid #ddd;
          color: #8d6e63;
        }
        
        &.confirm-btn {
          margin-left: 10px;
          background-color: #2c7873;
          color: #fff;
        }
      }
    }
  }
}
</style> 